import React, { Component, Fragment } from 'react';
import { Card, Spin, Row, Col, Icon, message } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import HeaderTab from '@/components/HeaderTab';
import styles from './index.less';

class Company extends Component {
    state = {
        icontype: 1,
        expressListMap: [],
        commonExpressListMap: [],
        tabs: [
            {
              title: '快递发货',
              key: `/${window.storeId}/delivery/express`,
              // disabled: true
            },
            {
              title: '快递单模板',
              key: `/${window.storeId}/delivery/expressbilltemplate/list`,
            },
            {
              title: '物流公司',
              key: `/${window.storeId}/delivery/logistics`,
            },
            // {
            //   title: '物流查询',
            //   key: `/${window.storeId}/delivery/logisticsInquiry`,
            // },
          ],
    }

    componentWillMount() {
        //获取商家设置的快递公司
        this.getCompanyList();
        //获取系统常见的快递公司
        this.getCommonExpressList();
        window.Isoption = false;
    }

      componentDidMount() {
        window.Isoption = true;
      }

    getCompanyList = () => {
        const { dispatch } = this.props
        dispatch({
            type: 'expresssetting/GetStoreExpressList',
            param: {},
            callback: (data) => {
                this.setState({ expressListMap: data.DataList });
            }
        });
    }

    delete = (company, index) => {
        const { dispatch } = this.props
        const { expressListMap, commonExpressListMap } = this.state;
        expressListMap[index].loading = true;
        this.setState({ expressListMap })
        dispatch({
            type: 'expresssetting/DelExpress',
            param: { Id: company.Id },
            callback: (data) => {
                if (data.Code === 0) {
                    company.loading = false
                    commonExpressListMap.push(company);
                    this.setState({
                        commonExpressListMap,
                        expressListMap: expressListMap.filter(item => item.Id !== company.Id)
                    })
                    message.success('移除成功')
                } else {
                    console.log(data.Msg)
                    message.error('移除失败')
                }
            }
        });
    }

    add = (company, index) => {
        const { dispatch } = this.props
        const { expressListMap, commonExpressListMap } = this.state;
        commonExpressListMap[index].loading = true
        this.setState({ commonExpressListMap })
        dispatch({
            type: 'expresssetting/AddExpress',
            param: { Id: company.Id },
            callback: (data) => {
                if (data.Code === 0) {
                    company.loading=false
                    expressListMap.push(company);
                    this.setState({
                        commonExpressListMap: commonExpressListMap.filter(item => item.Id !== company.Id),
                        expressListMap
                    })
                    message.success('添加成功')
                } else {
                    console.log(data.Msg)
                    message.error('添加失败')
                }
            }
        });
    }

    getCommonExpressList = () => {
        const { dispatch } = this.props
        dispatch({
            type: 'expresssetting/GetCommonExpressList',
            param: {},
            callback: (data) => {
                this.setState({ commonExpressListMap: data.DataList });
            }
        });
    }
    // 头部标签页切换
  onTabChange = id => {
    this.setState(
      {
        activeId: id,
      },
      () => {
        router.replace({
          pathname: `${id}`,
        });        
      }
    );
  };

    render() {
        const { expressList, commonExpressList ,loading,oemInfo} = this.props;
        const { expressListMap, commonExpressListMap } = this.state;
        return (
            <Fragment>
                {/* <HeaderTab
                _this={this}
                type="slider"
                activeId={this.state.activeId}
                onChange={this.onTabChange}
                tabs={this.state.tabs}
                onClick={()=>console.log(22)}
                > 
                </HeaderTab> */}
                <Spin spinning={loading}>
                    <Card
                        bordered={false}
                        className={styles.ComponentHead}
                        title={<div>已选物流<span>（快递订单发货时可选用已添加的物流公司）</span></div>}
                    >
                        <Row>
                            {
                                expressListMap && expressListMap.length > 0 ? expressListMap.map((item, index) => {
                                    return <Col span={4} key={item.Id}>
                                        <Spin spinning={item.loading ? item.loading : false}>
                                            <div className="img">
                                            <img  src={`${oemInfo.cdnUrl}/${item.Ico}`} />
                                            </div>
                                            <p>{item.Name}</p>
                                            <div className="floor"><Icon type="delete" onClick={() => this.delete(item, index)} /></div>
                                        </Spin>
                                    </Col>
                                }) : null


                            }


                        </Row>
                    </Card>
                    <Card
                        bordered={false}
                        className={styles.ComponentList}
                        title="可选物流"
                    >
                        <Row>
                            {
                                commonExpressListMap && commonExpressListMap.length > 0 ? commonExpressListMap.map((item, index) => {
                                    return <Col span={4} key={item.Id}>
                                        <Spin spinning={item.loading ? item.loading : false}>
                                            <div className="img">
                                            <img src={`${oemInfo.cdnUrl}/${item.Ico}`} />
                                            </div>
                                            <p>{item.Name}</p>
                                            <div className="floor"><Icon type="plus" onClick={() => this.add(item, index)} /></div>
                                        </Spin>
                                    </Col>
                                }) : null


                            }

                        </Row>
                    </Card>
                </Spin>
            </Fragment>
        );
    }
}
export default connect(({ expresssetting, global, loading }) => ({
    expressList: expresssetting.expressList,
    commonExpressList: expresssetting.commonExpressList,
    loading: loading.effects['expresssetting/GetStoreExpressList'],
    oemInfo: global.oemInfo,

}))(Company);